<template>
  <div class="home-container">
    <div class="content">
      <h1>欢迎使用聚灵云4.0</h1>
      <p>请选择您要进入的系统</p>

      <div class="card-container">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-card hoverable @click="navigateTo('/master/login')">
              <template #cover>
                <div class="card-icon">
                  <IconStorage />
                </div>
              </template>
              <a-card-meta title="中控台">
                <template #description>管理系统和用户</template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable @click="navigateTo('/merchant/login')">
              <template #cover>
                <div class="card-icon">
                  <IconApps />
                </div>
              </template>
              <a-card-meta title="商家端">
                <template #description>管理商品和订单</template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable @click="navigateTo('/provider/')">
              <template #cover>
                <div class="card-icon">
                  <IconDesktop />
                </div>
              </template>
              <a-card-meta title="服务商端">
                <template #description>管理服务和预约</template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 24px">
          <a-col :span="8">
            <a-card hoverable @click="navigateTo('/supplier/')">
              <template #cover>
                <div class="card-icon">
                  <IconGift />
                </div>
              </template>
              <a-card-meta title="供应商端">
                <template #description>管理产品和库存</template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable @click="navigateTo('/mall/')">
              <template #cover>
                <div class="card-icon">
                  <IconTag />
                </div>
              </template>
              <a-card-meta title="官网商城端">
                <template #description>管理商城和会员</template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <a-divider />

      <h2>系统文档</h2>
      <a-card>
        <a-table :columns="columns" :data="tableData" :pagination="false">
          <template #operation="{ record }">
            <a-link :href="record.link" target="_blank">
              <IconLink />
              查看
            </a-link>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import {
  IconStorage,
  IconApps,
  IconDesktop,
  IconGift,
  IconTag,
  IconLink,
} from "@arco-design/web-vue/es/icon";

// 导航函数
const navigateTo = (path) => {
  window.location.href = path;
};
definePageMeta({
  layout: false,
});
// 文档表格列定义
const columns = [
  {
    title: "文档名称",
    dataIndex: "name",
  },
  {
    title: "文档类型",
    dataIndex: "type",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
  },
  {
    title: "操作",
    dataIndex: "operation",
    slotName: "operation",
  },
];

// 文档表格数据
const tableData = [
  {
    key: "1",
    name: "聚灵云4.0思维导图",
    type: "思维导图",
    updateTime: "2025-03-26",
    link: "https://kdocs.cn/l/cjus4BfABsGS",
  },
  {
    key: "2",
    name: "系统使用手册",
    type: "PDF文档",
    updateTime: "2025-03-25",
    link: "#",
  },
  {
    key: "3",
    name: "开发者文档",
    type: "Markdown",
    updateTime: "2025-03-24",
    link: "#",
  },
];
</script>

<style scoped>
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  width: 80%;
  max-width: 1200px;
  padding: 40px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 8px;
  color: #1d2129;
}

p {
  text-align: center;
  margin-bottom: 32px;
  color: #4e5969;
}

h2 {
  margin-top: 32px;
  margin-bottom: 16px;
  color: #1d2129;
}

.card-container {
  margin-top: 32px;
}

.card-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background-color: #f2f3f5;
  font-size: 48px;
  color: #165dff;
}
</style>
